<style lang="less" scoped="true">
    .img-box {
        height: 210px;
        overflow: hidden;

        .img {
            width: 100%;
        }
    }

    .title {
        display: flex;
        align-items: center;
        span {
            display: inline-block;
            background: #E3C79F;
            width: 15px;
            height: 20px;  
            margin-right: 8px;
        }
    }
    .intro {
        padding: 0 16px;
        &>* {
            margin-top: 15px;
            font-size: 12px;
        }
        .content{
            line-height: 1.5;
        }
    }
    .buy {
        text-align: center;
        margin-top: 30px;
        button {
             width: 200px;
        }
    }

</style>

<template>
    <div id="film-detail">
        <div class="img-box">
            <img class="img" :src="obj.cover && obj.cover.origin" alt="">
        </div>
        <h3 class="title mg-top-20"><span></span>影片简介</h3>
        <div class="intro mg-top-20">
            <p>
                <span class="k">导演</span>
                <span class="v">{{obj.director}}</span>
            </p>
            <p>
                <span class="k">主演</span>
                <span class="v">{{obj.director}}</span>
            </p>
            <p>
                <span class="k">地区语言</span>
                <span class="v">{{obj.nation}}|{{obj.language}}</span>
            </p>
            <p>
                <span class="k">类型</span>
                <span class="v">{{obj.category}}</span>
            </p>
            <p>
                <span class="k">上映日期</span>
                <span class="v">{{obj.director}}</span>
            </p>
            <p class="content">{{obj.synopsis}}</p>
        </div>
        <div class="buy">
            <van-button type="warning">立刻购票</van-button>
        </div>
    </div>
</template>


<script>
    import { Button } from 'vant';

    export default {
        data() {
            return {
                obj: {}
            }
        },
        
        components: {
            [Button.name]: Button
        },

        created() {
            this.getDetail();
        },

        methods: {
            getDetail() {
                const id = this.$route.params.id;
                const url = `/film/${id}`;
                const data = {}
                this.fetch(url, data, (res) => {
                    this.obj = res.film;
                })
            }
        }
    }

</script>
